<template>
  <div class="search">
    <div class="search-content">
      <MyIcon icon="#icon-fangdajing"></MyIcon>
      <MyInput inline @input="input" v-model="val"></MyInput>
    </div>
  </div>
</template>

<script>
/**
 *引入组件
 *注册组件
 *template:
 *       <my-search @getVal="getVal"/>
 *js:
 *       getVal(value){
 *           console.log(value);
 *       }
 */

import MyIcon from '../IconFont/iconFont';
import MyInput from '../Input/input';
export default {
  components: {
    MyIcon,
    MyInput
  },
  props: ['value'],
  data() {
    return {
      val: ''
    };
  },
  methods: {
    input(value) {
      this.$emit('getVal', value);
    }
  }
};
</script>

<style>
.search {
  width: 100%;
}

.search .search-content {
  width: 90%;
  height: 30px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  background: #f7f7f7;
  border-radius: 20px;
}

.search .search-content .inline {
  flex: 10;
  display: flex;
  justify-content: center;
}

.search .search-content .inline input {
  border: none;
  outline: medium;
  vertical-align: middle;
  background: #f7f7f7;
  border-radius: 20px;
  width: 100%;
}

.search .search-content .iconbox {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
